<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="../build/g6.js"></script>
  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.6/dist/g2.min.js"></script>
  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.8.9/dist/data-set.min.js"></script>
  <script src="./assets/d3-4.13.0.min.js"></script>
  <script src="../build/plugins.js"></script>
  <title>云栖 demo 3</title>
</head>
<style>
    body{
      background: #2E2E2E;
    }
    </style>
<body>
  <div id="mountNode" style="position: relative;">
    <!-- <img class="legend" width="220" src="https://gw.alipayobjects.com/zos/rmsportal/AuLKMNbRvKidugdUCaXz.png" style="position: absolute;right: 200px;"/> -->
  </div>
  <script>
    $.getJSON('./assets/data/link-data.json', data => {
      const Mapper = G6.Plugins['tool.mapper'];
      const colors = ['#2f4b7c', '#665191', '#a05195', '#d45087', '#f95d6a', '#ff7c43', '#ffa600'];
      const nodeColorMapper = new Mapper('node', 'color', 'color', colors);
      const { Util } = G6;
      const graph = new G6.Graph({
        container: 'mountNode',
        animate: true,
        height: window.innerHeight, // 画布高
        plugins: [
          nodeColorMapper,
          new G6.Plugins['tool.highlightSubgraph']({
            maskStyle: {
              fill: 'black',
              fillOpacity: 0.35
            }
          }),
          new G6.Plugins['tool.fisheye']({
            radius: 300
          }), 
          new G6.Plugins['tool.textDisplay']({
            ratio: 2.3
          }),
        ],
        fitView:'autoZoom',
      });
      graph.node({
        style: {
          stroke: '#333'
        },
        label(model) {
          return {
            text: model.label,
            fill: 'white',
          }
        }
      })
      graph.on('afteritemdraw', ({ item }) => {
        const label = item.getLabel();
        if (label) {
          label.set('freezePoint', {
            x: 0,
            y: 0
          });
        }
      });
      graph.preventAnimate(()=>{
        graph.read(data);
      });
      // 画布向左偏移 1/6 的画布kuandu
      const width = graph.getWidth();
      graph.translate(-width/7, 0);
      // 隐藏所有边
      graph.preventAnimate(()=>{
        graph.getEdges().forEach(edge=>{
          graph.hide(edge);
        });
      });

      // 鼠标悬浮高亮节点，并显示一度关系
      let showEdgesCache;
      graph.on('node:mouseenter', ({item})=>{
        const {
          reNodes,
          reEdges
        } = Util.extract('bi', [item]);
        graph.highlightSubgraph(reNodes.concat(reEdges));
        graph.preventAnimate(()=>{
          reEdges.forEach(edge=>{
            graph.show(edge);
          })
        })
        showEdgesCache=reEdges
      });
      graph.on('node:mouseleave', ()=>{
        graph.unhighlightGraph();
        graph.preventAnimate(()=>{
          showEdgesCache.forEach(edge=>{
            graph.hide(edge)
          });
        });
      });
    });
  </script>
</body>
</html>